<template>
  <view class="navbar" :style="{ paddingTop: `${safeAreaInsets?.top + 10}px` }">
    <view v-if="isHome" class="logo">
      <image class="logo-img" src="@/static/images/logo.png" mode=""></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <view class="searchBox">
      <uni-easyinput
        class="search"
        prefixIcon="search"
        :inputBorder="false"
        :suffixIcon="isHome ? 'scan' : 'search'"
        :confirm-type="!isHome ? 'search' : undefined"
        v-model="searchText"
        placeholder="搜索商品"
        @focus="handleFocus"
        @iconClick="handleClick"
        @keyup.enter="handleSearch"
      >
      </uni-easyinput>
    </view>
  </view>
</template>

<script setup lang="ts">
// eslint-disable-next-line prettier/prettier
import { ref, computed, watch } from "vue";

const props = defineProps<{
  keyWord: string;
}>();

watch(
  () => props.keyWord,
  (newVal) => {
    searchText.value = newVal;
    handleSearch();
  },
);

const page = getCurrentPages();
const isHome = computed(() => {
  return page[page.length - 1].route === "pages/Home/Home";
});
const { safeAreaInsets } = uni.getWindowInfo();
const searchText = ref("");
const handleClick = (val: string) => {
  if (val === "suffix" && page[0].route === "pages/Home/Home") {
    // 允许从相机和相册扫码
    uni.scanCode({
      success: function (res) {
        console.log("条码类型：" + res.scanType);
        console.log("条码内容：" + res.result);
      },
    });
  } else {
    handleSearch();
  }
};
// 搜索
const handleSearch = () => {
  // 搜索
  uni.showToast({
    title: "搜索成功",
    icon: "none",
  });
};
// 搜索框聚焦
const handleFocus = () => {
  if (isHome.value) {
    uni.navigateTo({
      url: "/pages/search/search",
    });
  }
};
</script>

<style lang="scss">
.navbar {
  background-image: url(@/static/images/navigator_bg.png);
  background-size: cover;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: 16rpx;

  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;

    .logo-img {
      width: 166rpx;
      height: 39rpx;
    }

    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }

  .searchBox {
    margin-top: 20rpx;
    display: flex;
    align-items: center;

    .search {
      :deep(.uni-easyinput__content) {
        padding-left: 20rpx;
        padding-right: 10rpx;
        border-radius: 35rpx;
        background-color: #80e2d0 !important;

        .uni-icons {
          color: #fff !important;
          font-size: 36rpx !important;
        }

        .uni-input-placeholder,
        .uni-input-input {
          color: #fff !important;
          font-size: 24rpx !important;
        }
      }
    }
  }
}
</style>
